<template>
	<uni-popup ref="popup" type="bottom">
		<view class="main">
			<scroll-view scroll-y="true" class="list" @scrolltolower="loadMore">
				<view class="text">群成员列表</view>
				<view class="item" v-for="(item, index) in list" :key="index" @click="toDetail(item.userID)">
					<view class="left">
						<image class="avatar" lazy-load="true" :src="item.avatar"></image>
						<view class="nick">{{item.nick}}</view>
						<image class="gender"  v-if="item.gender == 2" src="@/static/icon/woman.png" mode="aspectFill" />
						<image class="gender" v-if="item.gender == 1" src="@/static/icon/man.png" mode="aspectFill" />
					</view>
					<image class="hi" src="@/static/images/article/dazhaohu_2.png" mode="aspectFill" @click="navigateToChatDetail(item.userID, item.nick)"/> 
				</view>
			</scroll-view>
		</view>
	</uni-popup>
</template>

<script>
	import uniPopup from '@/components/uni-ui/uni-popup/uni-popup.vue';
	export default {
		components:{
			uniPopup
		},
		data(){
			return{
				page: 1,
				list:[],
				groupID: "",
				hasMore: true,
			}
		},
		methods:{
			async open(id){
				this.groupID = id;
				this.page = 1;
				this.hasMore = true
				this.$refs.popup.open();
				let res = await this.TIM.getGroupMemberList(id, this.page)
				this.list = res.data.memberList;
			},
			async loadMore(){
				if(!this.hasMore){
					return
				}
				this.page = this.page + 1;
				let res = await this.TIM.getGroupMemberList(this.groupID, this.page)
				if(res.data.memberList.length == 0){
					this.hasMore = false
				}
				this.list = this.list.concat(res.data.memberList)
			},
			toDetail(uid) {
				uni.navigateTo({
					url: "/pages/detail/index?uid=" + uid,
				});
			},
			navigateToChatDetail(userID, nickName){
				let jsonUserID = encodeURIComponent(JSON.stringify(userID));
				let jsonNickName = encodeURIComponent(JSON.stringify(nickName));
				let jsonConversationID = encodeURIComponent(JSON.stringify("C2C" + userID));
				let jsonConversationType = encodeURIComponent(JSON.stringify("C2C"));
				uni.navigateTo({
					url:"/pages/chat/detail?userID=" + jsonUserID + "&nickName=" + jsonNickName + "&conversationID=" + jsonConversationID + "&conversationType=" + jsonConversationType
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
.main{
	height: 60vh;
	padding: 50rpx 50rpx;
}
.text{
	
}
.list{
	height: calc(100% -100rpx);
	.item{
		display: flex;
		justify-content:space-between;
		align-items:center;
		margin-bottom: 20rpx;
		.left{
			display: flex;
			align-items:center;
			.nick{
				margin-left: 20rpx;
			}
			.avatar{
				border-radius: 100%;
				width: 75rpx;
				height: 75rpx;
			}
			.gender{
				margin-left: 20rpx;
				width: 30rpx;
				height: 30rpx;
			}
		}
		.hi{
			width: 45rpx;
			height: 45rpx;
		}
		
	}
	
}
</style>